<template>
  <div>
    <!-- 定义面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 定义卡片 -->
    <el-card class="box-card">

      <!-- 定义第一行数据 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getBillList">
            <el-button slot="append" icon="el-icon-search" @click="getBillList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary"  @click="getBillList = true">查找</el-button>
        </el-col>
      </el-row>

        <!-- 定义表格数据
           :data: 表格的数据来源
           prop:  从billList中获取的属性值
           label: 字段名称
           stripe: 斑马纹效果
           border: 列
        -->
         <!-- 获取商品列表数据 -->
               <el-table :data="billList" style="width: 100%" stripe border>
                 <el-table-column type="index" label="序号" width="50px">
                 </el-table-column>
                 <el-table-column prop="itemNum" label="商品号" width="80px">
                 </el-table-column>
                 <el-table-column prop="itemType" label="商品类型" width="80px">
                 </el-table-column>
                 <el-table-column prop="userRealname" label="姓名" width="80px">
                 </el-table-column>
                 <el-table-column prop="userPhone" label="电话" width="120px">
                 </el-table-column>

                 <!-- 使用过滤器修改时间 在main.js中定义过滤器 -->
                 <el-table-column prop="money" label="价格(元)" width="80px">
                   <template slot-scope="scope">
                     {{scope.row.money | priceFormat}}
                   </template>
                 </el-table-column>
                 <el-table-column prop="msg" label="备注信息" width="150px">
                 </el-table-column>
                 <el-table-column prop="created" label="点餐时间" width="100px" :formatter="formatDate">
                 </el-table-column>
                 <el-table-column prop="updated" label="结账时间" width="100px" :formatter="formatDate">
                 </el-table-column>


                 </el-table-column>
                <!-- <el-table-column prop="updated" label="更新时间" width="180px" :formatter="formatDate">
                 </el-table-column> -->
                 <el-table-column label="操作">
                   <template slot-scope="scope">
                     <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateBill(scope.row)">修改</el-button>
                     <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteBillBtn(scope.row)">删除</el-button>
                     <el-button size="small" :disabled="scope.row.status == 0" :type="scope.row.status ? 'primary' : 'dinger'  "
                      @click="updateStatusBtu(scope.row)">{{scope.row.status ? '未结账':'已结账' }}</el-button>
                   </template>
                 </el-table-column>
               </el-table>

        <!-- 3.定义分页功能
           1.@size-change  当页面的条数变化时触发
           2.@current-change  当页数改变时触发
           3.current-page  显示当前的页数 ??
           4.:page-sizes   显示页数的数组
           5.page-size     初始条件下每页的条数
           6.layout        显示分页的样式种类 全部显示
           7.total         数据的总数
           prev表示上一页，next为下一页，pager表示页码列表，除此以外，jumper表示跳页元素，total表示显示页码总数，sizes用于设置每页显示的页码数量。
         -->
        <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pageNum"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="queryInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
        </el-pagination>

      </el-card>

      <!--
        :visible.sync  控制对话框是否展现
      -->
      <el-dialog title="添加商品" :visible.sync="addBillDialogVisible" width="65%"
          @close="closeAddBillDialog">

        <el-form :model="addBillForm" :rules="rules" ref="addBillRuleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="商品类型" prop="itemType">
            <el-input v-model="addBillForm.itemType"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="money">
            <el-input v-model="addBillForm.money"></el-input>
          </el-form-item>
          <!-- <el-form-item label="图片" prop="image">
            <el-input v-model="addBillForm.image"></el-input>
          </el-form-item> -->
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="addBillDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addBillBtn">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 用户修改弹出框-->
      <el-dialog title="修改商品" :visible.sync="updateBilldialogVisible" width="50%" @close="closeUpdateBillDialog">

        <el-form :model="updateBillForm" :rules="rules" ref="updateBillRuleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="商品类型" prop="itemType">
            <el-input v-model="updateBillFormillDialog.itemType"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="money">
            <el-input v-model="updateBillFormillDialog.money"></el-input>
          </el-form-item>
          <!-- <el-form-item label="图片" prop="image">
            <el-input v-model="updateBillFormillDialog.image"></el-input>
          </el-form-item> -->
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="closeUpdateBillDialog" >取 消</el-button>
          <el-button type="primary" @click="updateBill2">确 定</el-button>
        </span>
      </el-dialog>


      <!-- 结账弹出框-->
      <el-dialog title="账单" :visible.sync="updateInItemdialogVisible" width="50%" @close="closeupdateInItemDialog">
        <el-form :model="updateInItemForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户姓名" disabled>
            <el-input v-model="updateInItemForm.userRealname"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" disabled>
            <el-input v-model="updateInItemForm.userIdNum"></el-input>
          </el-form-item>
          <el-form-item label="商品类型" disabled>
            <el-input v-model="updateInItemForm.itemType"></el-input>
          </el-form-item>
          <el-form-item label="价格(分)" disabled>
            <el-input v-model="updateInItemForm.money"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="saoma" >微信结账</el-button>

          <el-button type="primary" @click="updateStatus(updateInItemForm)">现金结账</el-button>
        </span>
      </el-dialog>
      <!-- 扫码弹出框-->
      <el-dialog title="扫码支付" :visible.sync="saoMa" width="50%" @close="closeSaoMa">
        <el-form class="login_form">
          <div class="weixin">
            <img src="../../assets/images/erweima.png" />

          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeSaoMa" >取消</el-button>
          <el-button type="primary" @click="updateStatus(updateInItemForm)">确定</el-button>
        </span>
      </el-dialog>

  </div>
</template>

<script>
  export default {
    data(){
      return {
        //定义分页查询对象
        queryInfo: {
          query: '',    //用户查询的数据
          pageNum: 1,   //默认第一页
          pageSize: 10   //每页5条
        },
        billList: [],   //获取分页后的结果
        total: 0,
        // 默认修改商品信息不展示
        updateInItemdialogVisible: false,
        // 默认扫码不展示
        saoMa: false,
        // 结账框展示内容
        updateInItemForm: {
          id: '',
          userRealname: '',
          userIdNum:  '',
          itemType: '',
          money: ''
        },
        addBillDialogVisible: false,
        updateBilldialogVisible: false,
        //设定新增用户的对象
        addBillForm: {
          itemType: '',
          money: ''
          // image: ''
        },
        updateBillForm: {
          itemType: '',
          money: ''
          // image: ''
        },
        updateBillFormillDialog: {
          itemType:  '',
          money: ''
          // image: ''
        },
        rules: {
          itemType: [
            { required: true, message: '请输入商品类型', trigger: 'blur' }
          ],
          money: [
            { required: true, message: '请输入价格', trigger: 'blur' }
          ]
          // image: [
          //   { required: true, message: '请上传图片', trigger: 'blur' }
          // ]
        }
      }
    },
    methods: {
      //1.动态获取billList数据
      async getBillList(){
       const {data: result} = await this.$http.get("/bill/list",{params: this.queryInfo})
       if(result.status !== 200) return this.$message.error("获取列表失败")
       //为total属性赋值
       this.total = result.data.total
       this.billList = result.data.rows
      },
      //通过JS格式化时间
      formatDate(row, column, cellValue, index) {
        let date = new Date(cellValue)
        let year = date.getFullYear()
        let month = (date.getMonth() + 1 + '').padStart(2, '0')
        let day = (date.getDate() + '').padStart(2, '0')
        let HH = (date.getHours() + '').padStart(2, '0')
        let MM = (date.getMinutes() + '').padStart(2, '0')
        let SS = (date.getSeconds() + '').padStart(2, '0')
        return year + '-' + month + '-' + day + ' ' + HH + ":" + MM + ":" + SS
      },
      handleSizeChange(pageSize){
        //查询的条件需要变化
        this.queryInfo.pageSize = pageSize
        //重新查询数据
        this.getBillList()
      },

      // 关闭账单时调用
      closeupdateInItemDialog(){
        this.updateInItemdialogVisible = false
      },
      // 关闭扫码时调用
      closeSaoMa(){
        this.saoMa = false
        this.updateInItemdialogVisible = false
      },
      // 扫码弹出框
      saoma(){
        this.saoMa = true
      },

      handleCurrentChange(pageNum){
        this.queryInfo.pageNum = pageNum
        this.getBillList()
      },
      updateStatusBtu(bill){
        this.updateInItemForm = bill
        this.updateInItemdialogVisible = true
      },
      async updateStatus(bill){
        //获取用户的Id号/状态信息 发起restFul请求.
        //this.$http.put("/user/status/"+user.id+"/"+user.status)
        //模板字符串写法 `` 可以编辑多行,可以直接对象取值${key}
        //es6的高端写法
        const {data: result} =
        await this.$http.put(`/bill/status/${bill.id}/${bill.status}`)
        if(result.status !== 200) return this.$message.error("更新操作失败")
        this.$message.success("更新操作成功!")
        this.updateInItemdialogVisible = false
        this.saoMa = false
        this.getBillList()


      },
      closeAddBillDialog(){
        //当对话框关闭时,应该重置表单
        this.$refs.addBillRuleForm.resetFields()
      },
      closeUpdateBillDialog(){
        this.updateBilldialogVisible = false
        this.getBillList()
      },
      addBillBtn(){
        //对整个表单重新进行校验  1.获取表单的对象  2.进行数据校验
        this.$refs.addBillRuleForm.validate(async valid => {
          if(!valid) return this.$message.error("请正确填写数据")
          //之后发起ajax请求实现用户新增
          const {data: result} = await this.$http.post('/bill/addBill',this.addBillForm)
          if(result.status !== 200) return this.$message.error("新增失败")
          this.$message.success("新增成功")
          //将对话框关闭
          this.addBillDialogVisible = false
          //重新刷新列表页面
          this.getBillList()
        })
      },
      async deleteBillBtn(bill) {
        //消息确认框
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          //根据id删除数据
          const {
            data: result
          } = await this.$http.delete("/bill/deleteBillById", {
            params: {
              id: bill.id
            }
          })
          if (result.status !== 200) return this.$message.error("商品删除失败")
          this.$message.success("商品删除成功")
          //重新获取商品列表信息
          this.getBillList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //展示要修改的用户信息,可以使用作用域插槽的写法,也可以发起Ajax请求查询数据库获取
      updateBill(bill){
        this.updateBillFormillDialog = bill
        this.updateBilldialogVisible = true
      },

      //更新用户信息,发起Ajax请求put  /bill/updateBill
      async updateBill2(){
        const {data: result} = await this.$http.put("/bill/updateBill",this.updateBillFormillDialog)
        if(result.status !== 200) return this.$message.error("修改操作失败!")
        this.$message.success("修改操作成功!")
        this.updateBilldialogVisible = false
        this.getBillList()
      },
      async updateInRoom(){
          console.log(this.updateInItemForm)
          const {data: result} = await this.$http.put("/inRoom/updateInRoom",this.updateInItemForm)
          if(result.status !== 200) return this.$message.error("结账失败!")
          this.$message.success("结账成功!")
          this.updateInItemdialogVisible = false
          this.saoMa = false
          this.getBillList()
      }
},
    //当页面加载完成之后 调用该函数
    mounted(){
      //获取userList列表数据
      this.getBillList()
    }
}
</script>

  <!-- 当前样式是否支持less语法 样式的一种语言
  scoped 让样式只对当前组件有效 防止样式击穿 -->

<style lang="less" scoped>
.weixin{
  height: 300px;
  width: 300px;
  position: absolute;           /* 绝对定位*/
  top: 50%;
  left: 50%;                    /* 距离左侧50%*/
  transform: translate(-50%,-50%);   /*回调50%*/
  img {
    height: 100%;
    width: 100%;
  }
}
.login_form {
    height: 300px;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
</style>
